DAY 29 [Day 貳拾玖] 來開發元宇宙中藥鋪吧17 - 虛擬座標系統 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 29

Web 3

當 APP develop 遇上 web3 與 Metaverse 浪潮系列第 29 篇

DAY 29 [Day 貳拾玖] 來開發元宇宙中藥鋪吧17 - 虛擬座標系統

14th鐵人賽

DaYuan

2022-10-13 23:39:01

310 瀏覽

分享至

利用調整座標系統
可以讓我們做到物件放在固定的格線上面或者是格子裡面的效果

      <Canvas>
        <場景>
        <TransformControlsRule />
        <gridHelper args={[1000, 200, '#151515', '#020202']} position={[0, 0, 0]} />
      </Canvas>


function TransformControlsRule({ ...props }) {
  const tooltip = useRef()
  const transform = useRef()
  var min = new THREE.Vector3(-60, -5, -60) // 定義可移動範圍
  var max = new THREE.Vector3(60, 40, 60)  // 定義可移動範圍
  const { target, setTarget } = useTargetStore()

  target ? target.position.clamp(min, max) : null

  const { mode } = useControls({
    mode: {
      value: 'translate',
      options: ['translate', 'rotate', 'scale']
    }
  })
  const { system } = useControls({
    system: {
      value: 'world',
      options: ['world', 'local']
    }
  })

  useEffect(() => {
    if (transform.current) {
      const controls = transform.current
      const callback = (event) => {
        var object = controls.object // control is an instance of TransformControls
        object?.position.clamp(min, max)
      }
      controls.addEventListener('change', callback)

      // controls.setMode(mode)
    }
  })
  useFrame((state) => {
    // console.log(size)

    if (target) {
      tooltip.current.position.lerp(new THREE.Vector3().set(target.position.x, target.position.y, target.position.z), 0.5) 定義移動範圍動畫
    }
  })
  return (
    <>
      {target && (
        <TransformControls ref={transform} space={system} object={target} mode={mode} translationSnap={5}  //定義可移動範圍一次加多少
rotationSnap={Math.PI / 4}>
          {target && (
            <group ref={tooltip} scale={1}>
              <Html distanceFactor={0.25} position={[0, 10, 0]}>
                <div className="tooltip">
                  {/* {target.position} */}
                  {/* Setting */}
                  <p>NAME</p>
                  Model001
                  <br />
                  OK | NO
                </div>
              </Html>
            </group>
          )}
        </TransformControls>
      )}
    </>
  )
}